<template>
	<div id="app">
		<el-container class="img_box no_size">
			<el-main>
				<el-row type="flex" style="margin-top: 10px;">
					<el-col :span="6">
						<img src="./assets/logo2.png" width="200px" />
					</el-col>
					<el-col :span="15">
					</el-col>
					<el-col :span="6" class="right">
						<img src="./assets/logo.png" width="200px" />
					</el-col>
				</el-row>
				<el-row type="flex" style="margin-top: 10px;">
					<el-col :span="6">
					</el-col>
					<el-col :span="15" style="text-align: center;">
						<span style="font-size: xx-large;" v-on:click="notifyMe('hello')">深圳亚森数据中心</span>
					</el-col>
					<el-col :span="6" class="right">
					</el-col>
				</el-row>

				<el-row type="flex" style="margin-top: 50px;">
					<el-col :span="6">
					</el-col>
					<el-col :span="15">
						<span style="font-size: large;">自2014年11月01日至{{curr_year}}年{{curr_month}}月{{curr_day}}日</span>
					</el-col>
					<el-col :span="6" class="right">
					</el-col>
				</el-row>

				<el-row type="flex" style="margin-top: 10px;">
					<el-col :span="8">
					</el-col>
					<el-col :span="14" style="text-align: right;">
						<span style="font-size: xx-large;">安全运行第<div style="color: red; display: inline-block;">{{period_day}}</div> 天</span>
					</el-col>
					<el-col :span="6" class="right">
					</el-col>
				</el-row>

				<el-row type="flex" style="margin-top: 10px;">
					<el-col :span="6">
					</el-col>
					<el-col :span="15">
						<span>星期{{weekday}} {{curr_hour}}时{{curr_min}}分{{curr_seconds}}秒 本月PUE值: <el-input size="mini" v-model="pue"
							 style="width: 80px;margin-right: 20px;"></el-input> 温度: <el-input v-model="temperature" size="mini" style="width: 80px;margin-right: 20px;"></el-input>
						</span>
					</el-col>
					<el-col :span="6" class="right">
					</el-col>
				</el-row>
			</el-main>

			<el-footer style="text-align: center; padding-top: 20px; font-style: italic; display:  none;"><span>Copyright
					suwenguang (c) 2021-2100 All Rights Reserved. </span> </el-footer>
		</el-container>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				curr_year: '2020',
				curr_month: '12',
				curr_day: '30',
				period_day: '1',
				weekday: '2',
				curr_hour: '12',
				curr_min: '20',
				curr_seconds: '10',
				pue: '输入',
				temperature: '输入',
				timer: ''
			}
		},

		methods: {
			notifyMe(text) {
				this.$notify({
					title: '设置属性',
					type: 'success',
					message: text,
					duration: 3000
				})
			}
		},
		beforeMount() {
			console.log("before moute: init");
			refresh(this)
		},
		mounted() {
			var that = this
			this.timer = setInterval(() => {
				console.log(1)
				refresh(that)
			}, 1000)
		},
		beforeDestory() {
			clearInterval(this.timer)
		}
	}

	function transferWeek(that, weekday) {
		if (weekday === 0) {
			return '日';
		}

		return weekday
	}

	function refresh(that) {
		var date = new Date()
		console.log(date);
		var year = date.getFullYear()
		var month = date.getMonth() + 1
		var day = date.getDate()
		var weekday = date.getDay();
		that.curr_year = year
		that.curr_month = month
		that.curr_day = day
		var transWeek = transferWeek(this, weekday);
		console.log(transWeek);
		that.weekday = transWeek
		that.curr_hour = date.getHours()
		that.curr_min = date.getMinutes()
		that.curr_seconds = date.getSeconds()



		var oldDate = new Date(2014, 11, 1)
		var periodDay = Math.floor((date.getTime() - oldDate.getTime()) / (24 * 3600 * 1000))
		console.log(periodDay);
		that.period_day = periodDay
	}
</script>


<style>
	.no_size {
		height: 0;
		margin: 0;
		padding: 0;
	}

	.img_box {
		width: 100%;
		height: 100%;
		background-image: url(./assets/bg.png);
		background-size: contain;
		background-position: center;
		/* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
		position: absolute;
		/* 不可缺少 */
		/* overflow: hidden; */
		/* overflow: auto; */
		z-index: -1;
		background-repeat: no-repeat;
	}
</style>
